<template>
  <div class="img-wraper">
      <div class="product-info">
        <span>商品名称：{{goods.Title}}</span>
        <span>商品型号：{{goods.Name}}</span>
      </div>
      <div class="img-box">
        <!-- 左侧 -->
         <div class="img-left" >
           <div class="add-img">
              <img :src="imgUrl"  v-if="imgUrl">
              <div v-else class="no-img">
                  <i class="el-icon-picture-outline" />
              </div>
           </div>
            <div class="img-choose">
               <label for="">选择图片：</label>
               <input type="file" style="margin-top:5px" @change="changeImage($event)">
            </div>
            <div class="img-input">
              <label for="">图片类型：</label>
               <el-input v-model="Name" placeholder="请输图片类型" style="margin-top:5px"></el-input>
            </div>
            <div class="img-input">
              <label for="">图片序号：</label>
               <el-input v-model="imgSort" placeholder="请输图片序号" style="margin-top:5px"></el-input>
            </div>
               <el-button type="info" @click="submitGoodsImg">提交</el-button>
         </div>
         <!-- 右侧 -->
         <div class="img-right" v-if="imgList">
             <div class="img-right-wraper" v-for="(imgs, name) in imgList" >
                 <div class="right-img-name">{{name}}</div>
                 <div class="right-img-list" v-for="item in  imgs" >
                    <div class="list-img">
                      <img :src="'http://192.168.38.2:8091'+item.Img">
                    </div>
                    <div class="list-btn">
                      <span>{{item.Sort}}</span>
                      <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleRemoveImg(roomid,item)">删除</el-button>
                    </div>
                 </div>
             </div>
         </div>
      </div>
  </div>
</template>

<script>
import { roomImgList,GoodsInfo, addGoodsImg,removeImg } from "@/api/mdlist";
export default {
  data() {
    return {
     roomid:"",
     goods:{},//产品信息
     imgInfo:{},
     imgSort:0,//图片序号
     imgUrl:"",
     Name:"",//图片类型
     file:"",
     param:"",
     imgList:[]//图片数组
     }
  },
  created() {
     //产品的id
    this.roomid = this.$route.query.id
    this.productImgs(this.$route.query.id)
  },
  methods: {
     //查询商品图片
     productImgs(id){
       roomImgList({ Roomid: id }).then((res)=>{
          if (res.msg === 'success' && res.list.length > 0) {
            let list = res.list
              this.imgList = list.reduce((last,item)=>{  
              if(last[item.Name]){  
                  last[item.Name].push(item)  
              }else{  
                  last[item.Name]=[item]  
              }  
              return last  
          },{})  
          console.log(this.imgList)
          }else {
            this.imgList = []
          }
          
       })
     },
     
    //   //获得产品信息
    //  getProductInfo(id){
    //    GoodsInfo({ Goodsid: id }).then((res) => {
    //      if (res.data.msg === 'success') {
    //        this.goods =res.data.Goods.Goods
    //      }
    //    })
    //  },
   
    // //选择图片
    changeImage(e){
        this.file = e.target.files[0]
       let reader = new FileReader()
       
        var that = this
        reader.readAsDataURL(this.file)
        reader.onload = function(e) {
          that.imgUrl = this.result
        } 
    },

    //提交图片
    submitGoodsImg(){  
      if (this.Name == '' && this.imgSort == '' && this.imgUrl === '') {
         alert('请填写完整信息')
      } 
      let file = this.file
      let param = new FormData()
      param.append('file',file,file.name);//通过append向form对象添加数据
      param.append('Name',this.Name)
      param.append('Classname','Room')
      param.append('Sort',this.imgSort) 

      addGoodsImg({ 'Content-Type': 'multipart/form-data','Roomid': this.roomid },param).then((res)=> {
       if (res.data.msg === '上传成功') {
         this.Name = ""
         this.imgSort = 0
         this.imgUrl = ""
         this.productImgs(this.roomid)
       }
     })  
    },

    //删除图片
    handleRemoveImg(id,item) {
      console.log(id)
      removeImg({Roomid: id},{Classname:item.ClassName,Imgid:item.Id,Name:item.Name}).then((res)=> {
        if (res.data.msg === 'success') {
           this.productImgs(id)
        }
      })
    }
  },
  
};
</script>

<style>
.product-info {
  width: 100%;
  height: 30px;
  font-size: 14px;
  color: #000;
  font-weight: 600;
}
.product-info>span {
  padding: 0 5px;
}
 .img-wraper {
   width: 100%;
   height: 100%;
   padding: 20px;
 }
 .img-box {
   width: 100%;
   height: 100%;
   display: flex;
   border: 1px solid #dddddd;
   border-radius: 10px;
   padding: 10px;
   font-size: 14px;
   min-height: 600px;
 }
 .img-left {
   width: 200px;
   background-color: #fbfbfb;
   padding: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;   
 }
 .add-img {
   width: 150px;
   height: 150px;
   overflow: hidden;
   border: 1px solid #dddddd;
   background-color: #fff;
 }
 .no-img {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 60px;
 }
  .add-img img {
    height: 100%;
    width: auto;
  }
  .img-choose {
    width: 100%;
    padding: 10px 0;
  }
  .img-input {
   width: 100%;
   padding: 10px 0;
  }
  label {
    padding-bottom: 5px;
  }
 .img-right {
   flex: 1;
   width: 100%;
   display: flex;
   margin-left: 10px;
 }
 .img-right-wraper {
   width: 150px;
   height: 100%;
   padding: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .right-img-name {
   width: 100%;
   height: 30px;
   background-color: #000;
   font-size: 16px;
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
 }
 .right-img-list {
   width:100%;
   height: 200px;
   margin-bottom: 10px;
   border: 1px solid #000;
 }
 .list-img {
   width: 100%;
   height: 150px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
  .list-img img {
    width: 100%;
    height: auto;
  }
  .list-btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .list-btn>span {
    padding: 2px 5px;
    background-color: #E6A23C;
    font-size: 14px;
    color: #ffff;
  }
 
</style>